<template>
  <!-- 商品区 -->
  <div class="commodity">
    <img src="@/assets/images/two/pzTitle.png"
         class="pzimg"
         v-if="routeName == '拍照手机'">
    <img src="@/assets/images/two/khTitle.png"
         class="pzimg"
         v-else>
    <div v-for="(item,index) in imglist"
         :key="index"
         class="commodity-bg"
         :class="item.styclass">
      <img :src="item.titleImg"
           class="titleimg">
      <!-- 商品 -->
      <div class="commodity-img">
        <div v-for="(item2,index2) in item.imgUrl"
             :key="index2"
             style="position: relative;">
          <div class="iphoneleft"
               v-if="item2.name == '苹果1' && routeName == '拍照手机'">和彩云</div>
          <div class="iphonerig"
               v-if="item2.name == '苹果2' && routeName == '拍照手机'">和彩云</div>
          <!-- oppo -->
          <div class="iphoneleft oppoleft"
               v-if="item2.name == 'oppo1' && routeName == '拍照手机'">和彩云</div>
          <div class="iphonerig opporig"
               v-if="item2.name == 'oppo2' && routeName == '拍照手机'">和彩云</div>
          <div class="oppo3"
               v-if="item2.name == 'oppo3' && routeName == '拍照手机'">+和彩云</div>
          <div class="oppo3"
               v-if="item2.name == 'oppo4' && routeName == '拍照手机'">+和彩云</div>
          <div class="iphonerig oppo8"
               v-if="item2.name == 'oppo8' && routeName == '拍照手机'">和彩云</div>
          <div class="iphonerig oppo9"
               v-if="item2.name == 'oppo9' && routeName == '拍照手机'">和彩云</div>
          <div class="iphonerig oppo10"
               v-if="item2.name == 'oppo10' && routeName == '拍照手机'">和彩云</div>
          <div class="iphonerig vivo1"
               v-if="item2.name == 'vivo1' && routeName == '拍照手机'">和彩云</div>
          <div class="iphonerig vivo2"
               v-if="item2.name == 'vivo2' && routeName == '拍照手机'">和彩云</div>
          <div class="iphonerig vivo2"
               v-if="item2.name == 'vivo2' && routeName == '拍照手机'">和彩云</div>
          <div class="iphonerig xm1"
               v-if="item2.name == 'xm1' && routeName == '拍照手机'">和彩云</div>
          <div class="iphonerig HONOR1"
               v-if="item2.name == 'HONOR1' && routeName == '拍照手机'">和彩云</div>
          <div class="iphonerig HONOR2"
               v-if="item2.name == 'HONOR2' && routeName == '拍照手机'">和彩云</div>

          <img :src="item2.url"
               style="margin-right:9px">
          <div class="xbutimg"
               @click="watchesClick(item2,item,index2)"></div>
          <div class="qbutimg"
               @click="grabClick(item2,item,index2)">抢</div>
        </div>
        <img src="@/assets/images/two/pgtext.png"
             class="ydtextimg"
             v-if="item.name == 'iPhone'">
      </div>
    </div>
    <div style="height:1px"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, getCurrentInstance, onMounted } from 'vue'
import loginModel from '@m/onekey-login/index.vue'
// 格式化日期的
import userApi from '@/api/mobile_user/index'
import { Storage } from '@/utils/Storage'
import { MOBILE_TOKEN, MOBILE_USER } from '@/store/mutation-types'
import imgTitle1 from '@/assets/images/two/pgTitle.png'
import imgTitle2 from '@/assets/images/two/opTitle.png'
import imgTitle3 from '@/assets/images/two/viTitle.png'
import imgTitle4 from '@/assets/images/two/nzTitle.png'
import imgTitle5 from '@/assets/images/two/xmTitle.png'
import imgTitle6 from '@/assets/images/two/hoTitle.png'
import imgip1 from '@/assets/images/two/pg1.png'
import imgip2 from '@/assets/images/two/pg2.png'

import imgop1 from '@/assets/images/two/op1.png'
import imgop2 from '@/assets/images/two/op2.png'
import imgop3 from '@/assets/images/two/op3.png'
import imgop4 from '@/assets/images/two/op4.png'
import imgop5 from '@/assets/images/two/op5.png'
import imgop6 from '@/assets/images/two/op6.png'
import imgop7 from '@/assets/images/two/op7.png'
import imgop8 from '@/assets/images/two/op8.png'
import imgop9 from '@/assets/images/two/op9.png'
import imgop10 from '@/assets/images/two/op10.png'

import imgvi1 from '@/assets/images/two/vi1.png'
import imgvi2 from '@/assets/images/two/vi2.png'
import imgvi3 from '@/assets/images/two/vi3.png'
import imgvi4 from '@/assets/images/two/vi4.png'
import imgvi5 from '@/assets/images/two/vi5.png'
import imgvi6 from '@/assets/images/two/vi6.png'
import imgvi7 from '@/assets/images/two/vi7.png'
import imgvi8 from '@/assets/images/two/vi8.png'
import imgvi9 from '@/assets/images/two/vi9.png'
import imgvi10 from '@/assets/images/two/vi10.png'

import imgnz1 from '@/assets/images/two/nz1.png'
import imgnz2 from '@/assets/images/two/nz2.png'

import imgxm1 from '@/assets/images/two/xm1.png'

import imgho1 from '@/assets/images/two/ho1.png'
import imgho2 from '@/assets/images/two/ho2.png'
import imgho3 from '@/assets/images/two/ho3.png'
import imgho4 from '@/assets/images/two/ho4.png'
import imgho5 from '@/assets/images/two/ho5.png'
import { useRoute, useRouter } from 'vue-router'
import { recordCilck } from '@/utils/record'
import { Toast, Dialog } from 'vant'

export default defineComponent({
  name: 'Login',
  components: { loginModel },
  setup() {
    const { proxy }: any = getCurrentInstance()
    const router = useRouter()
    const route = useRoute()
    const state: any = reactive({
      num: 10,
      routeName: '',
      imglist: [
        {
          imgUrl: [
            { url: imgip1, name: '苹果1' },
            { url: imgip2, name: '苹果2' }
          ],
          titleImg: imgTitle1,
          name: 'iPhone',
          styclass: 'commoditybg2'
        },
        {
          imgUrl: [
            { url: imgop1, name: 'oppo1' },
            { url: imgop2, name: 'oppo2' },
            { url: imgop3, name: 'oppo3' },
            { url: imgop4, name: 'oppo4' },
            { url: imgop5, name: 'oppo3' },
            { url: imgop6, name: 'oppo3' },
            { url: imgop7, name: 'oppo3' },
            { url: imgop8, name: 'oppo8' },
            { url: imgop9, name: 'oppo9' },
            { url: imgop10, name: 'oppo10' }
          ],
          titleImg: imgTitle2,
          name: 'OPPO',
          styclass: 'commoditybg3'
        },
        {
          imgUrl: [
            { url: imgvi1, name: 'oppo1' },
            { url: imgvi2, name: 'vivo1' },
            { url: imgvi3, name: 'oppo10' },
            { url: imgvi4, name: 'oppo10' },
            { url: imgvi5, name: 'oppo4' },
            { url: imgvi6, name: 'oppo4' },
            { url: imgvi7, name: 'vivo2' },
            { url: imgvi8, name: 'vivo2' },
            { url: imgvi9, name: 'vivo2' },
            { url: imgvi10, name: 'vivo2' }
          ],
          titleImg: imgTitle3,
          name: 'ViVo',
          styclass: 'commoditybg4'
        },
        {
          imgUrl: [
            { url: imgnz1, name: 'oppo4' },
            { url: imgnz2, name: 'oppo4' }
          ],
          titleImg: imgTitle4,
          name: 'NZONE',
          styclass: 'commoditybg5'
        },
        {
          imgUrl: [{ url: imgxm1, name: 'xm1' }],
          titleImg: imgTitle5,
          name: '小米手机',
          styclass: 'commoditybg6'
        },
        {
          imgUrl: [
            { url: imgho1, name: 'oppo4' },
            { url: imgho2, name: 'oppo4' },
            { url: imgho3, name: 'HONOR1' },
            { url: imgho4, name: 'HONOR2' },
            { url: imgho5, name: 'xm1' }
          ],
          titleImg: imgTitle6,
          name: 'HONOR',
          styclass: 'commoditybg7'
        }
      ]
    })
    function watchesClick(data, item, index) {
      console.log(data, item.name, index + 1, '手机点击了商品详情')
      router.push({
        name: 'immediatelyTransaction'
      })
      recordCilck('二级-' + item.name + (index + 1) + '商品详情', '-')
      // Webapph5.pushTrack({ eventmsg: '二级-' + item.name + (index + 1) + '商品详情', eventid: '2' })
    }
    function grabClick(data, item, index) {
      console.log(data, item.name, index + 1, '手机点击了qia抢抢', '-')
      recordCilck('二级-' + item.name + (index + 1) + '去预约', '-')
      Storage.set('merchandiseNews', data, 30 * 60)
      let numType: any = localStorage.getItem('h5type')
      // Webapph5.pushTrack({ eventmsg: '二级-' + item.name + (index + 1) + '去预约', eventid: '2' })

      if (numType == 1) {
        window.location.href = 'https://gd.10086.cn/gmccapp/webpage/serviceHall/index.html'
      } else {
        // 您暂时无法参加本优惠，敬请留意其他优惠活动
        Dialog.alert({
          message: '您暂时无法参加本优惠，敬请留意其他优惠活动'
        }).then(() => {
          // on close
        })
      }
      console.log(Storage.get('merchandiseNews'))
    }
    function moreClick(data) {
      proxy.$emit('moreClick', data)
    }

    // 组件-完
    onMounted(() => {
      console.log(route.query.name, 'sss123')
      state.routeName = route.query.name
    })

    return {
      ...toRefs(state),
      moreClick,
      watchesClick,
      grabClick
    }
  }
})
</script>

<style lang="scss" scoped>
.commodity {
  .pzimg {
    width: 170px;
    margin-left: 100px;
    margin-top: -40px;
  }
  .commodity-bg {
    width: 350px;
    // height: 250px;
    // margin: 30px auto;
    background-size: 100% 100%;
    background-position: center center;
    .titleimg {
      width: 150px;
      margin: 35px 0 10px 90px;
    }
    .commodity-img {
      display: flex;
      flex-wrap: wrap;
      margin-left: 9px;
      z-index: 100;
      .iphoneleft {
        width: 50px;
        background: #db2103;
        position: absolute;
        top: 5px;
        right: 27px;
        font-size: 12px;
        transform: scale(0.8, 0.8);
        color: #fae2e4;
      }
      .iphonerig {
        width: 50px;
        background: #db2103;
        position: absolute;
        top: 5px;
        right: 18px;
        font-size: 12px;
        transform: scale(0.8, 0.8);
        color: #fae2e4;
      }
      .oppoleft {
        right: 7px;
        top: 6px;
      }
      .opporig {
        right: 5px;
        top: 6px;
      }
      .oppo3 {
        width: 70px;
        height: 15px;
        text-align: right;
        background: #db2103;
        position: absolute;
        top: 15px;
        right: 60px;
        font-size: 12px;
        transform: scale(0.8, 0.8);
        color: #fae2e4;
      }
      .oppo8 {
        top: 6px;
        right: 12px;
      }
      .oppo9 {
        top: 6px;
        right: 12px;
      }
      .oppo10 {
        top: 6px;
        right: 9px;
      }
      .vivo1 {
        top: 6px;
        right: 15px;
      }
      .vivo2 {
        top: 5px;
        right: 10px;
      }
      .xm1 {
        top: 5px;
        right: 9px;
      }
      .HONOR1 {
        top: 5px;
        right: 16px;
      }
      .HONOR2 {
        top: 5px;
        right: 11px;
      }
      .ydtextimg {
        width: 325px;
        text-align: center;
      }
      img {
        width: 160px;
        margin: 5px 0;
      }
      .xbutimg {
        // position: absolute;
        margin: -20px 0 3px 3px;
        background: chartreuse;
        opacity: 0;
        width: 40px;
        height: 15px;
        z-index: 200;
      }
      .qbutimg {
        position: absolute;
        margin: -60px 0px 3px 105px;
        opacity: 0;
        width: 50px;
        height: 50px;
        z-index: 200;
        // border: 1px solid aqua;
      }
    }
  }
  .commoditybg2 {
    height: 397px;
    margin: -30px auto !important;
    background-image: url(../../assets/images/two/ipxmbg.png);
  }
  .commoditybg3 {
    height: 1120px;
    margin: -170px auto !important;
    background-image: url(../../assets/images/two/oppobg.png);
    .titleimg {
      width: 150px;
      margin: 80px 0 10px 90px;
    }
  }
  .commoditybg4 {
    margin: -10px auto !important;
    background-image: url(../../assets/images/two/vivobg.png);
  }
  .commoditybg5 {
    height: 250px;
    margin: -20px auto !important;
    background-image: url(../../assets/images/two/nzonebg.png);
  }
  .commoditybg6 {
    height: 260px;
    margin: -20px auto !important;
    background-image: url(../../assets/images/two/honorbg.png);
  }
  .commoditybg7 {
    height: 600px;
    margin: -20px auto !important;
    background-image: url(../../assets/images/two/honorbg.png);
  }
}
</style>
